<template>
    <div>
        <el-button type="text" @click="opendialog">点击打开 Dialog</el-button>
        <!-- <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <span>需要注意的是内容是默认不居中的</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog> -->
        <custom-dialog :centerDialogVisible="centerDialogVisibleData" :getCenterDialogVisible="getCenterDialogVisible"></custom-dialog>
    </div>
 
</template>

<script>
import customDialog from './custom-dialog.vue';
export default {
  components: {customDialog},
    name: "DialogDemo",
    comments:{

    },
    data() {
        return {
            centerDialogVisibleData: false
        };
    },
    methods: {
        opendialog() {
            this.centerDialogVisibleData = true;
        },
        // 父组件定义一个方法来获取子组件的 centerDialogVisible 状态
        getCenterDialogVisible(val){
            log.info("获取子组件的 centerDialogVisible 状态", val);
            //修改父组件的 centerDialogVisible 状态
            this.centerDialogVisibleData = val;
            console.log("子组件的 centerDialogVisible 状态", this.centerDialogVisible);
        }
    },
}
</script>

<style>

</style>